<template>
  <div class="component-connector-edit-dialog-view">
    
    <ConnectorModuleConnectorCard
      ref="ConnectorModuleConnectorCard"
      visible
      isInIframe
      :key="componentKey"
      :card="card"
      :bizId="fromBizId"
      :fromBizNo="fromBizNo"
      :nodeTemplateId="nodeTemplateId"
      :nodeInstanceId="nodeInstanceId"
      :processId="processId"
      :showCreateButton="showCreateButton"
      :showEditButton="showEditButton"
      :showDeleteButton="showDeleteButton"
      :showExportButton="showExportButton"
      @add="addHandler"
      @edit="editHandler"
      @detail="detailHandler"
      @delete="deleteHandler"
    />

  </div>
</template>

<script>
/* components */
import { ConnectorModuleConnectorCard } from '@src/modules/connector'
/* util */
import qs from 'qs'
import { uuid } from 'pub-bbx-utils'

export default {
  name: 'component-connector-card-table-view',
  components: {
    ConnectorModuleConnectorCard
  },
  data () {
    return {
      isShowEditConnectorModal: false,
      connectorMessageData: {},
      componentKey: uuid()
    }
  },
  computed: {
    card() {
      return {
        cardName: this.cardName,
        cardId: this.cardId,
        config: {
          connectorInfo: this.connectorInfo
        }
      }
    },
    connectorInfo() {
      return {
        fromBizTypeId: this.fromBizTypeId,
        toBizTypeId: this.toBizTypeId,
        fromBizType: this.fromBizType,
        toBizType: this.toBizType,
      }
    },
    cardName() {
      return this.connectorMessageData?.card?.cardName || this.connectorMessageData.cardName || this.query.cardName || ''
    },
    cardId() {
      return this.connectorMessageData?.card?.cardId || this.connectorMessageData.cardId || this.query.cardId || ''
    },
    query() {
      return qs.parse(window.location.search.substr(1))
    },
    fromBizId() {
      return this.connectorMessageData.fromBizId || this.query.fromBizId
    },
    fromBizType() {
      return this.connectorMessageData.fromBizType || this.query.fromBizType
    },
    fromBizTypeId() {
      return this.connectorMessageData.fromBizTypeId || this.query.fromBizTypeId
    },
    fromBizNo() {
      return this.connectorMessageData.fromBizNo || this.query.fromBizNo
    },
    nodeTemplateId() {
      return this.connectorMessageData.nodeTemplateId || this.query.nodeTemplateId
    },
    nodeInstanceId() {
      return this.connectorMessageData.nodeInstanceId || this.query.nodeInstanceId
    },
    processId() {
      return this.connectorMessageData.processId || this.query.processId
    },
    toBizType() {
      return this.connectorMessageData.toBizType || this.query.toBizType
    },
    toBizTypeId() {
      return this.connectorMessageData.toBizTypeId || this.query.toBizTypeId
    },
    showCreateButton() {
      return this.connectorMessageData.showCreateButton || this.query.showCreateButton
    },
    showEditButton() {
      return this.connectorMessageData.showEditButton || this.query.showEditButton
    },
    showDeleteButton() {
      return this.connectorMessageData.showDeleteButton || this.query.showDeleteButton
    },
    showExportButton() {
      return this.connectorMessageData.showExportButton || this.query.showExportButton
    },
  },
  mounted () {
    this.postReadySuccessMessage()
    this.addMessageEventListeners()
    this.showDialog()
  },
  methods: {
    // 添加消息事件监听
    addMessageEventListeners () {
      const that = this

      // 监听父页面消息
      window.addEventListener('message', ({ data }) => {

        console.log('window.addEventListener ~ data', data)

        if (data.connector) {

          this.connectorMessageData = data.connector

          this.$nextTick(this.rerender)

        }

        if(data.refresh) {
           console.log('window.addEventListener ~ ConnectorModuleConnectorCard', ConnectorModuleConnectorCard)
          that.$refs.ConnectorModuleConnectorCard.refresh()
        }

      })

    },
    addHandler(data) {
      this.postAddMessage(data)
    },
    // 关闭弹窗
    closeDialog() {
      this.isShowEditConnectorModal = false
    },
    // 关闭弹窗事件
    closeEditConnectorHandler() {
      this.postCloseDialogMessage()
      this.closeDialog()
    },
    deleteHandler(row) {
      this.postDeleteMessage(row)
    },
    detailHandler(row) {
      this.postDetailMessage(row)
    },
    editHandler(row) {
      this.postEditMessage(row)
    },
    // 完成创建事件
    finishEditConnectorHandler() {
      this.closeDialog()
      this.postFinishEditConnectorMessage()
    },
    rerender() {
      this.componentKey = uuid()
    },
    // 显示弹窗
    showDialog() {
      this.isShowEditConnectorModal = true
    },
    postAddMessage(data = {}) {
      this.postMessage({ add: true, ...data })
    },
    postEditMessage(row) {
      this.postMessage({ edit: true, row })
    },
    postDetailMessage(row) {
      this.postMessage({ detail: true, row })
    },
    postDeleteMessage(row) {
      this.postMessage({ delete: true, row })
    },
    // 通知父页面关闭弹窗
    postCloseDialogMessage() {
      this.postMessage({ close: true })
    },
    // 通知父页面加载完成
    postReadySuccessMessage() {
      this.postMessage({ ready: true })
    },
    // 通知父页面创建完成
    postFinishEditConnectorMessage() {
      this.postMessage({ finish: true })
    },
    // 通知父页面发送消息
    postMessage(data) {

      console.log('postMessage ~ data', data)

      window.parent.postMessage(data, '*')

    },
  }
}
</script>

<style lang="scss">

.connector-module-edit-connector-dialog {

  .base-modal {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
  }

}

</style>
